<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<title>添加地址</title>
	</head>

	<body>

		<div id="app">
			<div class="header clearfloat" id="topBar">
					<a href="javascript:history.back()">
						<img src="../img/icon/arrowBack.png" />
					</a>
					<p>收获地址管理</p>
				</div>
			<div id="container" v-cloak>

				
				<div class="content">
					<div class="addressItem inlinkFlex" @click="addressModel=true">
						<p>所在地区</p>
						<input type="text" placeholder="选择地区"  readonly="" v-model="addressText"/>

					</div>
					<div class="addressItem inlinkFlex">
						<p>详细地址</p>
						<input type="text" placeholder="请输入到小区门牌号码" />
					</div>
					<div class="addressItem inlinkFlex">
						<p>收货人姓名</p>
						<input type="text" placeholder="收货人姓名" />
						
					</div>
					<div class="addressItem inlinkFlex">
						<p>手机号码</p>
						<input type="text" placeholder="收货人常用手机号码"/>
					</div>
					<div class="addressItem inlinkFlex">
						<p>邮政编码</p>
						<input type="text" placeholder="请输入邮政编码" />
					</div>
					
				</div>

				<div class="pageBottom" @click="onInsure">
					<span class="tabbar-label">添加</span>
				</div>
			</div>
			
			<!--地址选择-->
			<div class="model" v-show="addressModel" @click="addressModel = false" v-cloak>
				<div class="model-content-city" @click.stop="addressModel = true">
					<div class="addressBox">
						<ul>
							<li v-for="(provinceItem,provinceIndex) in addressList" @click.stop="onProvinceSelect(provinceIndex,provinceItem.text)" :class="{active: provinceIndex === activeProvince}">
								<span>{{provinceItem.text}}</span>
								<div class="cityBox">
									<ul>
										<li v-for="(cityItem,cityIndex) in provinceItem.children" @click.stop="onCitySelect(cityIndex,cityItem.text)" :class="{active: cityIndex === activeCity}">
											<span>{{cityItem.text}}</span>
											<div class="areaBox">
												<ul>
													<li v-for="(areaItem,areaIndex) in cityItem.children" @click.stop="onAreaSelect(areaIndex,areaItem.text)" :class="{active: areaIndex == activeArea}">
														<span>{{areaItem.text}}</span>
													</li>
												</ul>
											</div>
										</li>
									</ul>
								</div>
							</li>
						</ul>

					</div>
				</div>
			</div>
			<!--提示弹窗-->
			<div class="model" v-show="tipModel" v-cloak>
				<div class="model-content tip-content">
					<p>{{tipText}}</p>
					<p @click="tipModel=false">确定</p>
				</div>
			</div>
		</div>
	</body>

</html>